import React from "react";
import { Card, Button, Descriptions, List } from "antd";
import { useNavigate, useParams } from "react-router-dom";
import type { EMRRecord } from "../../types/emr";

const mockEMR: EMRRecord = {
  id: 'e1', patientId: 'p1', patientName: '张三', doctorId: 'd1', doctorName: '王医生', createdAt: '2024-06-01', updatedAt: '2024-06-02', chiefComplaint: '膝关节疼', history: '近一月反复发作', physicalExam: '膝关节压痛', diagnosis: '骨关节炎', prescription: [ { drugName: '氨糖', dosage: '0.75g', usage: '口服bid', days: 30 } ]
};

const EMRDetail: React.FC = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  // 实际应根据id加载对应数据
  const e = mockEMR;
  return (
    <Card style={{maxWidth: 760, margin:'0 auto', marginTop: 24}}>
      <Button type="link" onClick={()=>navigate(-1)}>&lt; 返回</Button>
      <Button type="primary" style={{float:'right'}} onClick={()=>navigate(`/doctor/emr/${e.id}/edit`)}>编辑</Button>
      <Descriptions title="病历详情" bordered size="small" column={1} style={{marginTop:20}}>
        <Descriptions.Item label="主诉">{e.chiefComplaint}</Descriptions.Item>
        <Descriptions.Item label="现病史">{e.history}</Descriptions.Item>
        <Descriptions.Item label="体格检查">{e.physicalExam}</Descriptions.Item>
        <Descriptions.Item label="诊断">{e.diagnosis}</Descriptions.Item>
        <Descriptions.Item label="处方">
          <List
            size="small"
            bordered
            dataSource={e.prescription}
            renderItem={item=><List.Item>{item.drugName}：{item.dosage}，{item.usage}，{item.days}天</List.Item>}
          />
        </Descriptions.Item>
      </Descriptions>
    </Card>
  );
};
export default EMRDetail;
